<template>
  <div class="business-wrapper">
    <section class="add-btn">
      <el-button type="primary" @click="edit('add')" v-if="!noShow">新增</el-button>
    </section>
    <el-table
      size="mini"
      v-loading="loading"
      :data="tableData"
      style="width: 100%"
      border
      :header-cell-style="{
        'background-color': '#eeeeee !important',
      }"
      :row-class-name="tableRowClassName"
    >
      <el-table-column type="index" label="序号" width="60" align="center">
        <template slot-scope="scope">
          <span>{{
              (page.pageNo - 1) * page.pageSize + scope.$index + 1
            }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="计算方式"
        :show-overflow-tooltip="true"
        min-width="100px"
      >
        <template slot-scope="scope">
          {{ $dictUtils.getDictLabel("calcType", scope.row.calcMethod, "") }}
        </template>
      </el-table-column>
      <el-table-column
        label="计量范围"
        :show-overflow-tooltip="true"
        min-width="120px"
      >
        <template slot-scope="scope">
          {{ scope.row.basisLower }}~{{ scope.row.basisUpper }}吨
        </template>
      </el-table-column>

      <el-table-column
        label="扣重标准"
        :show-overflow-tooltip="true"
        min-width="120px"
      >
        <template slot-scope="scope">
          <p v-if="scope.row.calcMethod===1">{{ scope.row.quantity }} 吨/车</p>
          <p v-else-if="scope.row.calcMethod===2">{{ scope.row.percent }}%</p>
          <p v-else-if="scope.row.calcMethod===3">{{ scope.row.randomLower }}~{{ scope.row.randomUpper }}吨</p>
        </template>
      </el-table-column>

      <el-table-column
        label="操作人"
        prop="createBy.loginName"
        :show-overflow-tooltip="true"
        min-width="120px"
      >
      </el-table-column>
      <el-table-column
        label="操作时间"
        prop="createDate"
        :show-overflow-tooltip="true"
        min-width="200px"
      >
      </el-table-column>
      <el-table-column prop="state" label="状态" width="110">
        <template slot-scope="scope">
          <section class="activate-state" v-if="scope.row.state===1">
            <i></i>
            {{ $dictUtils.getDictLabel("state", scope.row.state, "") }}
          </section>
          <section class="inactive-state" v-else>
            <i></i>
            {{ $dictUtils.getDictLabel("state", scope.row.state, "") }}
          </section>
        </template>
      </el-table-column>
      <el-table-column prop="address" label="操作" width="160px" v-if="!noShow">
        <template slot-scope="scope">
          <template v-for="item in $dictUtils.getDictList('state')">
            <el-link type="primary" v-if="item.value !=='-1'&& item.value!==(scope.row.state+'')&&(!(scope.row.state===-1&& item.value==='0')||item.value==scope.row.state)" :underline="false"
                     @click="editState(item.value, scope.row)"
                     :disabled="(scope.row.state===-1&& item.value==='0')||item.value==scope.row.state"
            >{{ item.label }}
            </el-link>
          </template>
          <el-link
            v-if="hasPermission('busin:deduct:edit')"
            type="primary"
            :underline="false"
            @click="edit('edit',scope.row)"
          >修改
          </el-link
          >
          <el-link
            v-if="hasPermission('busin:deduct:del')"
            type="primary"
            :underline="false"
            @click="del(scope.row.id)"
          >删除
          </el-link
          >
        </template>
      </el-table-column>
    </el-table>
<!--    <el-pagination-->
<!--      background-->
<!--      @size-change="handleSizeChange"-->
<!--      @current-change="handleCurrentChange"-->
<!--      :page-size="page.pageSize"-->
<!--      :current-page="page.pageNo"-->
<!--      layout="total,prev, next"-->
<!--      :total="page.total"-->
<!--    >-->
<!--    </el-pagination>-->
    <el-pagination
      background
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :page-size="page.pageSize"
      :current-page="page.pageNo"
      layout="total,prev, pager, next"
      :total="page.total"
    >
    </el-pagination>


    <el-dialog
      :title="title"
      :visible.sync="innerVisible"
      class="addForm-wrapper"
      append-to-body
      :close-on-click-modal="false"

    >

      <el-form
        label-width="125px"
        ref="form"
        :model="editForm"
      >
        <!-- oninput="value=value.replace(/[^\d]/g,'')" -->
        <el-form-item label="扣重计算类型:" prop="deductType"
                      :rules="[
                  {required: true, message:'请选择类型', trigger:'blur'}
                 ]">
          <el-select clearable v-model="editForm.deductType">
            <el-option
              v-for="item in  $dictUtils.getDictList('deductType')"
              :key="item.value"
              :label="item.label"
              :value="Number(item.value)">
            </el-option>
          </el-select>

        </el-form-item>
        <el-form-item label="参考范围(吨):"
                      :rules="[
                  {required: true, message:'请输入原发数', trigger:'blur'},
                  {validator: validator.isFloat, trigger:'blur'}
                 ]"
        >
          <div class="number-wrapper">
            <div>
              <el-form-item prop='basisLower' :rules="[
                  {required: true, message:'请输入原发数', trigger:'blur'},
                  {validator: validator.isFloat, trigger:'blur'}
                 ]">
                <el-input-number v-model="editForm.basisLower" :min="0.00" controls-position="right" size="mini"
                                 :precision="2" :step="1"></el-input-number>
              </el-form-item>
            </div>
            <div class="line" :span="2">～</div>
            <div>
              <el-form-item prop='basisUpper' :rules="[
                  {required: true, message:'请输入原发数', trigger:'blur'},
                  {validator: validator.isFloat, trigger:'blur'}
                 ]">
                <el-input-number v-model="editForm.basisUpper" :min="0.00" :max="maxNumber" controls-position="right"
                                 size="mini" :precision="2" :step="1"></el-input-number>
              </el-form-item>
            </div>
            <el-checkbox @change="changeBasisUpper" v-model="checked">不限</el-checkbox>
          </div>
        </el-form-item>
        <el-form-item label="计算方式:" prop="calcMethod"
                      :rules="[
                  {required: true, message:'请选择类型', trigger:'blur'}
                 ]">
          <el-select clearable v-model="editForm.calcMethod">
            <el-option
              v-for="item in  $dictUtils.getDictList('calcType')"
              :key="item.value"
              :label="item.label"
              :value="Number(item.value)">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="扣重标准:"   prop="quantity"  :rules="[
                  {required: true, message:'请输入合理扣重', trigger:'blur'}
                 ]" v-if="editForm.calcMethod===Number($dictUtils.getDictList('calcType')[0].value)">
            <el-input class="adjustInputAppend" placeholder="请输入扣重" v-model="editForm.quantity">
              <span slot="suffix">吨/车</span>
            </el-input>
        </el-form-item>
        <el-form-item label="扣重标准:":rules="[
                  {required: true, message:'请输入扣重百分比', trigger:'blur'}
                 ]"  prop="percent"  v-if="editForm.calcMethod===Number($dictUtils.getDictList('calcType')[1].value)">
            <el-input v-if="editForm.calcMethod!==Number($dictUtils.getDictList('calcType')[0].value)"
                      class="adjustInputAppend appendLess inputBox" placeholder="请输入扣重百分比" v-model="editForm.percent">
              <span slot="suffix">%</span>
            </el-input>
        </el-form-item>
        <el-form-item label="扣重随机范围:"
                      :rules="[
                  {required: true, message:' '},
                  {validator: validator.isFloat, trigger:'blur'}
                 ]"
                      v-if="editForm.calcMethod===Number($dictUtils.getDictList('calcType')[2].value)">
          <div class="number-wrapper random">
            <div>
              <el-form-item prop='randomLower' :rules="[
                  {required: true, message:'请输入随机数下限', trigger:'blur'},
                  {validator: validator.isFloat, trigger:'blur'}
                 ]">
                <el-input-number v-model="editForm.randomLower" :min="0.00" controls-position="right" size="mini"
                                 :precision="2" :step="1"></el-input-number>
              </el-form-item>
            </div>
            <div class="line" :span="2">～</div>
            <div>
              <el-form-item prop='randomUpper' :rules="[
                  {required: true, message:'请输入随机数上限', trigger:'blur'},
                  {validator: validator.isFloat, trigger:'blur'}
                 ]">
                <el-input-number v-model="editForm.randomUpper" :min="0.00" controls-position="right" size="mini"
                                 :precision="2" :step="1"></el-input-number>
              </el-form-item>
            </div>
          </div>
        </el-form-item>

      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" type="primary" @click="doSubmit()" v-noMoreClick
        >确定</el-button
        >
        <el-button size="small" @click="close()">取消</el-button>
      </span>
    </el-dialog>
  </div>

</template>
<script>
  import {
    getDeductList,
    updateDeductState,
    saveDeduct,
    deleteDeduct,
    getModelDeductData,
    getDeductInfo
  } from '@/api/business/business.js'

  export default {
    components: {},
    data() {
      return {
        noShow:false,
        checked: false,
        innerVisible: false,
        maxNumber: 999.00,
        loading: false,
        title: '扣重设置',
        businessId: '',
        modelId: '',
        page: {
          pageSize: 10,
          pageNo: 1,
          total: 0
        },
        tableData: [],
        editForm: {
          businessId: '',
          deductType: '',
          basisUpper: '',
          basisLower: '',
          calcMethod: '',
          randomLower: '',
          randomUpper: '',
          quantity: '',
          percent: '',
          random: ''
        }
      }
    },
    methods: {
      changeBasisUpper() {
        this.editForm.basisUpper = this.maxNumber
        this.editForm.basisLower = 0.00
      },
      edit(method, editForm) {
        if (method === 'add') {
          // this.editForm = {}
          if (this.modelId) {
            getModelDeductData({
              modelId: this.modelId
            }).then((res) => {
              if (res.data.code === '200') {
                this.editForm = res.data.result
              }
            });
          }
          this.innerVisible = true
        } else if (method === 'edit') {
          getDeductInfo({id: editForm.id}).then((res) => {
            if (res.data.code === '200') {
              this.innerVisible = true
              this.$nextTick(() => {
                this.editForm = {}
                this.editForm.id = res.data.result.id
                this.editForm.businessId = res.data.result.businessId
                this.editForm.deductType = res.data.result.deductType
                this.editForm.basisUpper = res.data.result.basisUpper
                this.editForm.basisLower = res.data.result.basisLower
                this.editForm.calcMethod = res.data.result.calcMethod
                this.editForm.quantity = res.data.result.quantity
                this.editForm.percent = res.data.result.percent
                this.editForm.random = res.data.result.random
              })
              this.title = '扣重设置'
            } else {
              this.$message({
                type: 'error',
                message: res.data.message
              })
            }
          })
        }
      },
      // 获取扣重列表
      getList(businessId, modelId) {
        console.log(businessId, modelId,"...");
        this.businessId = businessId
        this.modelId = modelId
        this.loading = true
        getDeductList({
          businessId: businessId,
          pageSize: this.page.pageSize,
          pageNo: this.page.pageNo
        }).then((res) => {
          if (res.data.code === '200') {
            if (res.data.result) {
              this.tableData = res.data.result.list;
              this.page.total = res.data.result.count;
            }


          }
          this.loading = false
        });
      },
      // 删除扣重
      del(id) {
        this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then((res) => {
          deleteDeduct({id: id}).then((res) => {
            if (res.data.code === '200') {
              this.$message({
                type: 'success',
                message: '删除成功!'
              })
              this.getList(this.businessId)
            }
          })
        })
      },
      // 新增扣重
      doSubmit() {
        if (this.businessId) {
          this.$refs.form.validate((valid) => {
            if (valid) {
              this.$set(this.editForm, 'businessId', this.businessId)
              saveDeduct(this.editForm).then((res) => {
                if (res.data.code === '200') {
                  this.$message({
                    message: '编辑成功',
                    type: 'success'
                  })
                  this.innerVisible = false
                  this.$emit('refreshDataList')
                  this.getList(this.businessId)
                }
              })
            }
          })
        } else {
          this.$notify.error({
            title: '错误',
            message: '请选择单条业务数据'
          })
        }
      },
      // 改变扣重状态
      editState(event, row) {
        console.log(event)
        updateDeductState({id: row.id, state: event}).then((res) => {
          if (res.data.code === '200') {
            this.getList(this.businessId)
            this.$message({
              type: 'success',
              message: '状态修改成功'
            })
          }
        })
      },
      tableRowClassName({row, rowIndex}) {
        if (rowIndex % 2 === 1) {
          return 'warning-row'
        } else {
          return 'success-row'
        }
      },
      close() {
        this.innerVisible = false
      },
      handleSizeChange(e) {
        this.page.pageSize = e
        this.getList(this.businessId, this.modelId)
      },
      handleCurrentChange(e) {
        this.page.pageNo = e
        this.getList(this.businessId, this.modelId)
      }
    },

    mounted() {

    }
  }
</script>
<style lang="scss" scoped>
  .addForm-wrapper {
    ::v-deep .el-dialog {
      .el-input__inner {
        width: 320px;
      }

      .el-form-item__content .number-wrapper.random .el-input-number {
        width: 148px !important;

        .el-input__inner {
          min-width: 148px !important;
        }
      }
    }
  }
</style>
